<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* 可以添加一些自定义样式 */
    </style>
</head>

<body>
    <div class="container">
        <h1 class="mt-5">Todo List</h1>
        <form class="mb-3" action="{{ url_for('add') }}" method="post">
            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>
            <div class="mb-3">
                <label for="due_time" class="form-label">Due Time</label>
                <input type="datetime-local" class="form-control" id="due_time" name="due_time">
            </div>
            <button type="submit" class="btn btn-primary">Add New item</button>
        </form>

        <form class="mb-3" action="{{ url_for('index') }}" method="get">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for..." name="search" value="{{ search_keyword }}">
                <button class="btn btn-outline-secondary" type="submit">Go!</button>
            </div>
        </form>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Control</th>
                </tr>
            </thead>
            <tbody>
                {% for todo in todos %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ todo.title }}</td>
                    <td>
                        <form action="{{ url_for('update_status', todo_id=todo.id) }}" method="post">
                            <input type="hidden" name="status" value="{% if todo.status == 'active' %}completed{% else %}active{% endif %}">
                            <button type="submit" class="btn btn-sm {% if todo.status == 'active' %}btn-outline-success{% else %}btn-outline-danger{% endif %}">
                                {% if todo.status == 'active' %}Done{% else %}Undo{% endif %}
                            </button>
                            <a href="#" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ todo.id }}">Edit</a>
                            <a href="{{ url_for('delete', todo_id=todo.id) }}" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure to delete this item?')">Remove</a>
                        </form>
                        <!-- 编辑事项的模态框 -->
                        <div class="modal fade" id="editModal{{ todo.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ todo.id }}" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editModalLabel{{ todo.id }}">Edit Todo</h </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <input type="text" class="form-control" id="editTitle{{ todo.id }}" value="{{ todo.title }}">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary" onclick="editTodo({{ todo.id }}, document.getElementById('editTitle{{ todo.id }}').value)">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="btn-group" role="group" aria-label="Status Filter">
            <a href="{{ url_for('index', status='all', search=search_keyword) }}" class="btn btn-outline-secondary {% if filter_status == 'all' %}active{% endif %}">All ({{ todos|length }})</a>
            <a href="{{ url_for('index', status='active', search=search_keyword) }}" class="btn btn-outline-secondary {% if filter_status == 'active' %}active{% endif %}">Active ({{ todos|length if filter_status!= 'completed' else 0 }})</a>
            <a href="{{ url_for('index', status='completed', search=search_keyword) }}" class="btn btn-outline-secondary {% if filter_status == 'completed' %}active{% endif %}">Completed ({{ todos|length if filter_status == 'completed' else 0 }})</a>
        </div>

    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function editTodo(todoId, newTitle) {
            // 这里可以使用AJAX等方式向后端发送请求更新待办事项标题
            // 为了简单示例，暂时只做提示
            alert('You clicked to edit todo with ID:'+ todoId +'and new title: '+ newTitle);
            // 实际中可这样发送请求：
            // fetch('/update_title/' + todoId, {
            //     method: 'POST',
            //     headers: {
            //         'Content-Type': 'application/json'
            //     },
            //     body: JSON.stringify({title: newTitle})
            // });
        }
    </script>
</body>

</html>